<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery下拉菜单</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style>

*{ margin:0; padding:0; }
body { background:#FFF;  font:12px/1.6em Helvetica, Arial, sans-serif; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
#navigation{ width:784px; }
#navigation ul li { float:left; margin-right:20px;background:#caddff;position:relative;z-index:100;}
#navigation ul li a { display:block}
#navigation ul li a:hover {color:#ff0000;}
#navigation ul li ul{position: absolute;width: 90px;overflow:hidden;display:none;}
#navigation ul li:hover ul{position: absolute;width: 90px;display:block;}
#navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: center;width: 100%;}

</style>
<script language="javascript">
$(function(){
	   $("#navigation ul li:has(ul)").hover(function(){
			$(this).children("ul").slideDown("fast");
        },function(){
		    $(this).children("ul").slideUp("fast");
		});
})
</script>
</head>
<body>
<!--导航-->
<div id="navigation">
	<ul>
		 <li><a href="#">首 页</a></li>
		 <li><a href="#">导航一</a>
				<ul>
					 <li><a href="#">一级栏目下拉</a></li>
					 <li><a href="#">一级栏目下拉</a></li>
					 <li><a href="#">一级栏目下拉</a></li>
				</ul>
		</li>
		<li><a href="#">导航二</a>
				<ul>
					 <li><a href="#">一级栏目下拉</a></li>
					 <li><a href="#">一级栏目下拉</a></li>
				</ul>
		 </li>
		<li><a href="#">导航三</a>
				<ul>
					 <li><a href="#">一级栏目下拉</a></li>
					 <li><a href="#">一级栏目下拉</a></li>
					 <li><a href="#">一级栏目下拉</a></li>
                     <li><a href="#">一级栏目下拉</a></li>
                </ul>
         </li>
		 <li><a href="#">导航四</a></li>
	</ul>
</div>
<!--导航结束-->
</body>
</html>
